<!--地图 -->
<template>
  <div class="box">
    <!-- <div class="header">
      <h4>地图</h4>
    </div> -->
    <div class="bbody">
      <baidu-map
        id="bm-view"
        ak="YFZcAIcAlegKTsIuGxSiGP7zYRblFMO5D"
        center="上海"
      >
      </baidu-map>
    </div>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { BaiduMap },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: paleturquoise;
}
// .header {
//   width: 100%;
//   height: 50px;
//   text-align: center;
//   line-height: 50px;
// }
// .header h4 {
//   width: 100%;
//   height: 50px;
// }
.bbody {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  background: oldlace;
}
#bm-view {
  width: 100%;
  height: 500px;
}
</style>